<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta th:name="_csrf" th:content="${_csrf.token}" />
  <!-- default header name is X-CSRF-TOKEN -->
  <meta th:name="_csrf_header" th:content="${_csrf.headerName}" />
  <title>内容商管理系统</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
  
  <!-- 引入bootstrap-table样式 -->
  <link href="plugs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

  <!-- Google Font -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
        
  <link rel="stylesheet" href="css/ladda.css">
  <link rel="stylesheet" href="css/ladda-themed.css">
  
  <!-- 模态框样式 -->
  <link href="css/modal.css" rel="stylesheet">
  
  <!-- bootstrap datetimepicker -->
  <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper" id="wrapper">
	<!-- 上传进度 -->
	<div id="loaded"></div>

	<!-- 头部界面 -->
	<header class="main-header">
	
	    <!-- Logo -->
	    <a href="#" class="logo">
	      <!-- mini logo for sidebar mini 50x50 pixels -->
	      <span class="logo-mini"><b>系统</b></span>
	      <!-- logo for regular state and mobile devices -->
	      <span class="logo-lg"><b>内容商管理系统</b></span>
	    </a>
	
	    <!-- 导航 -->
	    <nav class="navbar navbar-static-top" role="navigation">
	      <!-- Sidebar toggle button-->
	      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
	        <span class="sr-only">Toggle navigation</span>
	      </a>
	      <!-- 用户菜单 -->
	      <div class="navbar-custom-menu">
	        <ul class="nav navbar-nav">
	
	          <!-- User Account Menu -->
	          <li class="dropdown user user-menu">
	            <!-- Menu Toggle Button -->
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
	              <!-- The user image in the navbar-->
	              <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
	              <!-- hidden-xs hides the username on small devices so only the image appears. -->
	              <span class="hidden-xs user-name"></span>
	            </a>
	            <ul class="dropdown-menu">
	              <!-- The user image in the menu -->
	              <li class="user-header">
	                <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
	
	                <p class="role-name"></p>
	              </li>
	              <!-- Menu Footer-->
	              <li class="user-footer">
	                <div class="pull-left">
	                  <a href="#" class="btn btn-default btn-flat" data-toggle="modal" data-target="#updatePassword">修改密码</a>
	                </div>
	                <div class="pull-right">
	                  	<form action="/logout" method="post" id="logoutForm">
							<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" /> 
							<button type='submit' class='btn btn-default'>退出</button>
						</form>
	                </div>
	              </li>
	            </ul>
	          </li>
	
	        </ul>
	      </div>
	    </nav>
	  </header>

	<!-- 左侧导航 -->
	<aside class="main-sidebar">
	
	    <!-- sidebar: style can be found in sidebar.less -->
	    <section class="sidebar">
	
	      <!-- Sidebar user panel (optional) -->
	      <div class="user-panel">
	        <div class="pull-left image">
	          <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
	        </div>
	        <div class="pull-left info">
	          <p class="user-name"></p>
	          <!-- Status -->
	          <a href="#"><i class="fa fa-circle text-success"></i>&nbsp;在线</a>
	        </div>
	      </div>
	
	      <!-- Sidebar Menu -->
	      <ul class="sidebar-menu" data-widget="tree">
	        <!-- Optionally, you can add icons to the links -->
	        <li class="active">
	        	<a href="#">
	        		<i class="fa fa-link"></i>&nbsp;<span>资源包管理</span>
	        	</a>
	        </li>
	        
	        <li class="">
	        	<a href="/userDevicesManage">
	        		<i class="fa fa-file-o"></i>&nbsp;<span>设备管理</span>
	        	</a>
	        </li>
	        
	      </ul>
	      <!-- /.sidebar-menu -->
	    </section>
	    <!-- /.sidebar -->
	  </aside>

	<!-- 内容区域 -->
	<div class="content-wrapper">
		
	    <!-- Main content -->
	    <section class="content container-fluid">
			<div class="page-content" style="padding: 15px">
				<div id="toolbar">
					<div class="form-inline">
	                  <button class="btn btn-primary" data-toggle="modal" data-target="#searchModal">查询</button>
	                  <button class="btn btn-primary" data-toggle="modal" data-target="#newModal">上传资源</button>
	                </div>
			    </div>
				<table id="mytab" class="table table-hover"></table>
				
				<!-- 查询模态框 -->
				<div class="modal fade" id="searchModal" tabindex="-1" role="dialog">
			  		<div class="modal-dialog" role="document">
			    		<div class="modal-content">
			      			<div class="modal-header">
			        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        			<h4 class="modal-title">查询</h4>
			      			</div>
			      			
			      			<form class="form-horizontal" action="" method="post" role="form">
			     			 	<div class="form-group">
			    					<label for="resourceName" class="col-sm-3 control-label">资源名称</label>
			    					<div class="col-sm-7">
			    						<input type="text" class="form-control" id="resourceName">
			    					</div>
			  					</div>
			  					
			  					<div class="form-group">
			    					<label for="startTime" class="col-sm-3 control-label">时间</label>
			    					<div class="col-sm-3">
				    					<input type="text" class="form_datetime form-control" id="startTime" placeholder="请选择开始时间" readonly>
				    				</div>
									<div class="col-sm-3">
				    					<input type="text" class="form_datetime form-control" id="endTime" placeholder="请选择结束时间" readonly>
			    					</div>
			  					</div>
			     				
			  					<div class="form-group">
			  						<div class="col-md-4 col-md-offset-1 text-center">
			  							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			  						</div>
			  						<div class="col-md-4 col-md-offset-2 text-center">
			  							<button type="button" class="btn btn-primary" id="searchBtn">查询</button>
			  						</div>
			  						
			  					</div>
			     			</form> 
			     			 
			    		</div><!-- /.modal-content -->
			  		</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				
				<!-- 修改密码模态框 -->
				<div class="modal fade" id="updatePassword" tabindex="-1" role="dialog">
			  		<div class="modal-dialog" role="document">
			    		<div class="modal-content">
			      			<div class="modal-header">
			        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        			<h4 class="modal-title">修改密码</h4>
			      			</div>
			      			
			     			 <form class="form-horizontal" action="" method="post" role="form">
			     			 	<div class="form-group">
			    					<label class="col-md-4 control-label">新密码</label>
			    					<div class="col-md-6">
			    						<input id="password" type="password" class="form-control" />
			    					</div>
			  					</div>
			  					<div class="form-group">
			    					<label class="col-md-4 control-label">确认密码</label>
			    					<div class="col-md-6">
			    						<input id="password_confirmation" type="password" class="form-control" />
			    					</div>
			  					</div>
			  					
			  					<div class="text-center" id="errorDiv">
			  						<p class="dms-error"></p>
			  					</div>
			  					
			  					<div class="form-group">
			  						<div class="col-md-4 col-md-offset-1 text-center">
              							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            						</div>
            						<div class="col-md-4 col-md-offset-1 text-center">
              							<button type="button" class="btn btn-primary" id="resetBtn">重置密码</button>
            						</div>
			  					</div>
			     			 </form> 
			     			 
			    		</div><!-- /.modal-content -->
			  		</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				
				
				<!-- 新建资源模态框 -->
				<div class="modal fade" id="newModal" tabindex="-1" role="dialog">
			  		<div class="modal-dialog" role="document">
			    		<div class="modal-content">
			      			<div class="modal-header">
			        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        			<h4 class="modal-title">新建资源</h4>
			      			</div>
			      			
			     			<form class="form-horizontal" method="post" role="form">
			     			 	<div class="form-group">
			    					<label for="fileupload" class="col-sm-3 control-label">选择资源文件</label>
			    					<div class="col-sm-7">
			    						<!-- <input type="file" class="form-control" id="fileupload"> -->
			    						<label class="col-sm-10 col-md-10 dms-label-with-border file-label" id="fileLabel"></label>
			              				<span class="btn btn-primary fileinput-button pull-right">
			                				<span>选择</span>
			                				<input id="fileupload" type="file" name="firmwareFile" class="file-uploader">
			              				</span>
			    					</div> 
			  					</div>
			  					
			  					<div class="form-group">
			            			<label for="parseTypeInput" class="col-sm-3 control-label">码值解析方式</label>
			            			<div class="col-sm-7" id="parseTypeInput">
			                			<label class="radio-inline">
			                    			<input type="radio" name="codeOptions" value="1" checked="">区间码值解析
			                			</label>
			                			<label class="radio-inline">
			                    			<input type="radio" name="codeOptions" value="2">固定码值解析
			                			</label>
			            			</div>
			          			</div>
			          			
			          			<div class="form-group" id="code-div" style="display:none">
			    					<label class="col-sm-3 control-label">手动输入码值</label>
			    					<div class="col-md-7">
			    						<input type="text" id="codeInput" class="form-control" />
			    					</div>
			  					</div>
			          			
			          			<div class="progress active" style="width: 85%;margin: 10px auto;display:none;">
									<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
										<span class="sr-only">0%</span>
									</div>
								</div>
			  					
			  					<div class="form-group text-center">
			  						<button type="button" class="btn btn-primary" id="uploadBtn">确定上传</button>
			  						<button type="button" class="btn btn-primary" id="cancelBtn" style="display:none">停止上传</button>
			  					</div>
			     			 </form>  
			     			 
			    		</div><!-- /.modal-content -->
			  		</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				
				<!-- 更新资源模态框 -->
				<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
			  		<div class="modal-dialog" role="document">
			    		<div class="modal-content">
			      			<div class="modal-header">
			        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        			<h4 class="modal-title">更新资源</h4>
			      			</div>
			      			
			     			 <form class="form-horizontal" action="" method="post" role="form">
			     			 	<div class="form-group">
			    					<label for="updateNameInput" class="col-sm-3 control-label">资源名称</label>
			    					<div class="col-sm-7">
			    						<input type="text" class="form-control input-name" id="updateNameInput" disabled="disabled">
			    					</div>
			    					
			  					</div>
			  					<div class="form-group">
			    					<label for="updateVersionInput" class="col-sm-3 control-label">版本号</label>
			    					<div class="col-sm-7">
			    						<input type="text" class="form-control input-version" id="updateVersionInput" disabled="disabled">
			    					</div>
			  					</div>
			  					
			  					<div class="form-group">
			    					<label for="fileupdate" class="col-sm-3 control-label">选择资源文件</label>
			    					<div class="col-sm-7">
			    						<!-- <input type="file" class="form-control" id="fileupload"> -->
			    						<label class="col-sm-10 col-md-10 dms-label-with-border file-label" id="fileLabel"></label>
			                
			              				<span class="btn btn-primary fileinput-button pull-right">
			                				<span>选择</span>
			                				<input id="fileupdate" type="file" name="firmwareFile" class="file-uploader">
			              				</span>
			              				
			    					</div> 
			  					</div>
			  					
			  					<div class="progress active" style="width: 85%;margin: 10px auto;display:none;">
									<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
										<span class="sr-only">0%</span>
									</div>
								</div>
			  					
			  					<div class="form-group text-center">
			  						<button type="button" class="btn btn-primary" id="fileupdateBtn">确定上传</button>
			  						<button type="button" class="btn btn-primary" id="cancelupdateBtn" style="display:none">停止上传</button>
			  					</div>
			     			 </form> 
			     			 
			    		</div><!-- /.modal-content -->
			  		</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				
				<input type="hidden" id="updateId">
				<input type="hidden" id="codeType">
				<input type="hidden" id="deleteId">
				
				<!-- 删除模态框 -->
				<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog">
			  		<div class="modal-dialog" role="document">
			    		<div class="modal-content">
			      			<div class="modal-header">
			        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        			<h4 class="modal-title">警告</h4>
			      			</div>
			      			<div class="modal-body">
			      				<div id="confirmModalMessage"></div>
			      			</div>
			     			<div class="modal-footer">
                				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                				<button type="button" class="btn btn-danger" id="btn-delete" data-size="xs" data-style="expand-right"><span class="ladda-delete">删除</span></button>
            				</div>
			     			 
			    		</div><!-- /.modal-content -->
			  		</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				
				<!-- 停止文件上传模态框 -->
				<div class="modal fade" id="cancelModal" tabindex="-1" role="dialog">
			  		<div class="modal-dialog" role="document">
			    		<div class="modal-content">
			      			<div class="modal-header">
			        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        			<h4 class="modal-title">提示</h4>
			      			</div>
			      			<div class="modal-body">
			      				<div id="cancelModalMessage">已停止文件上传</div>
			      			</div>
			     			<div class="modal-footer">
                				<button type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
            				</div>
			     			 
			    		</div><!-- /.modal-content -->
			  		</div><!-- /.modal-dialog -->
				</div><!-- /.modal -->
				
			</div>			
	    </section> 
	    <!-- /.content -->
    </div>
  <!-- /.content-wrapper -->

  <!-- 底部界面 -->
  <footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
      Anything you want
    </div>
    <!-- Default to the left -->
    <strong>Copyright &copy; 2016 <a href="#">众鑫创展科技有限公司</a>.</strong> All rights reserved.
  </footer>

</div>
<!-- ./wrapper -->


<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>

<!-- bootstrap-table.min.js -->
<script src="plugs/bootstrap-table/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="plugs/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!-- jquery file upload相关js -->
<script src="plugs/file-upload/js/jquery.ui.widget.js"></script>
<script src="plugs/file-upload/js/jquery.iframe-transport.js"></script>
<script src="plugs/file-upload/js/jquery.fileupload.js"></script>
<script src="plugs/file-upload/js/jquery.fileupload-process.js"></script>
<script src="plugs/file-upload/js/jquery.fileupload-validate.js"></script>

<!-- bootstrap datetimepicker -->
<script src="plugs/bootstrap-datetimepicker.min.js"></script>
<script src="plugs/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="module" src="js/spin.js"></script>
<!-- ladda -->
<script type="module" src="js/ladda.js"></script>

<!-- 自定义js -->
<script src="js/index.js"></script>
<script type="module" src="js/user_index.js"></script>

</body>
</html>